---
title: "Toggle"
description: Toggle is like light switches for your digital digs. Flip 'em on, and they light stuff up; flip 'em off, and it's lights out.
order: 3
published: true
references: [https://react-spectrum.adobe.com/react-aria/ToggleButton.html#props]
---

## Basic

A toggle button allows users to switch between two states, such as enabling or disabling a feature.

<How toUse="buttons/toggle/toggle-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/toggle
```

## Manual installation
```bash
npm i react-aria-components tailwind-variants
```
<SourceCode toShow='toggle'/>

## Intent

Customize the look of the toggle button using the `intent` prop.

<How toUse="buttons/toggle/toggle-intent-demo" />

## Size

Adjust the toggle button's size using the `size` prop.

<How toUse="buttons/toggle/toggle-size-demo" />

## Controlled

Manage the toggle button's state with the `isSelected` prop.

<How toUse="buttons/toggle/toggle-controlled-demo" />

## Disabled

Disable a toggle button by setting the `disabled` prop.

<How toUse="buttons/toggle/toggle-disabled-demo" />

## Touch hitbox
Sometimes you may want to use this button with only an icon. In that case, you can apply the `touch-target` utility class on the `sq-*` size to increase the button’s hitbox for improved accessibility.
```css
@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}
```
